<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <CompanySelector
          style="width: 300px; margin-right: 10px"
          :tagCount="100"
          :companyId="bloc.form.companyId"
          @on-change="(value) => (bloc.form.companyId = value)"
        ></CompanySelector>
        <Input
          placeholder="经销商名称"
          v-model="bloc.form.agentName"
          style="width: 180px; margin-right: 10px"
        />
        <RoleSelectorSingle
          style="width: 180px; margin-right: 10px"
          :tagCount="1"
          :roleId="Number(bloc.form.roleId)"
          @on-change="(value) => (bloc.form.roleId = value)"
        ></RoleSelectorSingle>
        <Input
          placeholder="联系人"
          v-model="bloc.form.linkName"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="手机号码"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="添加时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
      <Button
        type="primary"
        style="margin-bottom: 10px"
        size="default"
        @click="save()"
      >
        保存
      </Button>
      <Button
        type="primary"
        style = "margin-bottom: 10px;margin-left: 10px"
        size="default"
        @click="reversal()"
      >
        返回
      </Button>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
        @on-selection-change="(selection) => (bloc.agentSelectArr = selection)"
      >
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
    <ChangeAgentPwd
    :showPsdModal="bloc.isShowPsdModal"
    :idx="bloc.agentId"
    @savePwdModal="bloc.savePwdModal()"
    @closeModal="bloc.isShowPsdModal = false"
  ></ChangeAgentPwd>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { AddBloc } from '@/view/agents/agent/AddBloc';
import { Agent } from '@/base/model/Agent';
import { formatDate } from '@/base/util/Dates';
import CompanySelector from '@/component/CompanySelector.vue';
import ChangeAgentPwd from '@/component/ChangeAgentPwd.vue';
import RoleSelectorSingle from '@/component/RoleSelectorSingle.vue';
import { Validation } from '@/base/Validation';
import { Resources } from '@/base/Resources';
import { isEmpty } from '@/base/util/Strings';

const columns = (bloc: AddBloc) => [
  {
    type: 'selection',
    width: 40,
    align: 'left'
  },
  {
    title: '所属品牌商',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: bloc.getCompanyName(params.row.companyId)
        }
      });
    },
    align: 'left',
    minWidth: 150,
    tooltip: true
  },
  {
    title: '经销商名称',
    key: 'agentName',
    align: 'left',
    minWidth: 150,
    tooltip: true
  },
  {
    title: '地址',
    key: 'address',
    minwidth: 100,
    align: 'left',
    tooltip: true
  },
  {
    title: '联系人',
    key: 'linkName',
    align: 'left',
    width: 100,
    tooltip: true
  },
  {
    title: '手机',
    key: 'phone',
    align: 'left',
    width: 120,
    tooltip: true
  },
  {
    title: '添加时间',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: formatDate(
            new Date(params.row.created),
            'yyyy-MM-dd hh:mm:ss'
          )
        }
      });
    },
    width: 160,
    align: 'left',
    tooltip: true
  },
];

@Component({ components: { ChangeAgentPwd,
        CompanySelector,
        RoleSelectorSingle } })
export default class extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc
        .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
        .catch((e) => {
          vm.$Message.error('操作错误');
        });
        vm.bloc.form.masterId = vm.idx;
    });
  }

  get idx() {
    return Number(this.$route.params.id);
  }

  bloc: AddBloc = new AddBloc();
  Validation = Validation;
  Resources = Resources;
  columns = columns(this.bloc);

  save() {
      if (isEmpty(this.bloc.agentSelectArr)) {
          this.$Message.error('请选择至少一个会员');
          return false;
      }
      this.bloc.batchSaveRoleRelationship().then((res) => {
        this.$router.replace(`/agents/agent/${this.bloc.form.masterId}`);
      })
  }

  reversal(){
    this.$router.replace(`/agents/agent/${this.bloc.form.masterId}`)
  }
}
</script>

<style lang="less">
</style>

